import {Component, OnInit, ViewEncapsulation} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';

import {ROUTER_DIRECTIVES, RouteParams} from "angular2/router";
import {HeroDetailService} from "../../shared/services/hero-detail.service";
import {HeroDetail} from "../../shared/types/Hero";
import {Ng2Highcharts} from "ng2-highcharts/ng2-highcharts";

@Component({
  selector: 'champion-detail',
  templateUrl: 'app/+ChampionDetail/components/champion-detail.component.html',
  styleUrls: ['app/+ChampionDetail/components/champion-detail.component.css'],
  directives: [
    FORM_DIRECTIVES,
    CORE_DIRECTIVES,
    MATERIAL_DIRECTIVES,
    Ng2Highcharts
  ],
  providers: [
    HeroDetailService
  ]
})
export class ChampionDetailComponent implements OnInit {
  constructor(public _heroDetailService:HeroDetailService,
              private _routeParams:RouteParams) {
  }

  public Hero:HeroDetail;
  private heroId:string;
  public errorMessage:string;
  public ChartData = new Array();

  ngOnInit() {
    this.heroId = this._routeParams.get('id') || '';
    this.getDetail(this.heroId);
  }

  getDetail(heroId:string) {
    this._heroDetailService.getDetail(heroId)
      .subscribe(
        data => {
          this.Hero = data;
          this.makeSparkLine(data);
        },
        error => this.errorMessage = <any>error);
  }


  makeSparkLine(data:HeroDetail) {
    for (let chartData of data.Statistics) {
      this.ChartData.push({
        title: {text: ''},
        chart: {
          type: 'area',
          borderWidth: 0,
          width: 240, height: 60,
          style: {overflow: 'visible'},
          skipClone: true
        },
        credits: {enabled: false},
        legend: {enabled: false},
        tooltip: {enabled: false},
        xAxis: {
          labels: {
            enabled: false
          },
          startOnTick: false,
          endOnTick: false,
        },
        yAxis: {
          title: {
            text: null
          },
          endOnTick: false,
          startOnTick: false,
          labels: {
            enabled: false
          },
          //tickPositions: [0]
        },
        series: [
          {
            name: chartData.Title,
            data: chartData.ChartsData
          }
        ]
      })
    }
  }

}
